<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *            佛祖保佑       永不宕机     永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-24 16:00:33
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-04-01 17:09:32
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="my-info">
    <div class="left">
      <div class="avatar">
        <img
          v-if="avatar"
          :src="avatar + '?imageView2/1/w/80/h/80'"
          class="user-avatar"
        />
        <i class="el-icon-user-solid icon" />
      </div>
      <div class="desc">
        <div class="title">下午好，{{ name }}，打起精神继续工作，加油！</div>
        <div class="contact">
          <div>
            <i class="el-icon-office-building" />
            {{ userinfo.company }}
          </div>
          <el-divider class="line" direction="vertical"></el-divider>
          <div>
            <i class="el-icon-message" />
            {{ userinfo.email }}
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="space-item" style="">
        <h3>账号权限</h3>
        <span>{{ userinfo.role }}</span>
      </div>
      <el-divider class="line" direction="vertical"></el-divider>
      <div class="space-item">
        <h3>待处理通知数量</h3>
        <span>
          <router-link class="link" to="/account/notice">{{ userinfo.handle }}</router-link>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'

export default {
  computed: {
    ...mapGetters(['avatar', 'name']),
    ...mapState({
      userinfo: state => state.user.userinfo
    })
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.my-info {
  margin: 0 -20px 0;
  padding: 10px 20px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #fff;
  .left {
    display: flex;
    flex-wrap: wrap;
    .avatar {
      width: 70px;
      height: 70px;
      margin-right: 20px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: $primary;
      overflow: hidden;
      .icon {
        font-size: 40px;
        color: #fff;
      }
    }
    .user-avatar {
      max-width: 100%;
      max-height: 100%;
    }
    .title {
      margin: 0.5em 0 0.7em;
      font-weight: 300;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
    }
    .contact {
      display: flex;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      i {
        // color: #8c8c8c;
      }
      .line {
        margin: 0 16px;
        background: rgba(0, 0, 0, 0.06);
        height: 0.9em;
      }
    }
  }
  .right {
    margin-top: 16px;
    display: flex;
    align-items: center;
    .space-item {
      text-align: center;
      h3 {
        margin: 0 0 12px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        font-weight: normal;
      }
      span {
        font-size: 18px;
        font-weight: 500;
      }
      .link {
        color: $primary;
        font-weight: bold;
      }
    }
    .line {
      height: 40px;
      margin: 0 32px;
      background: rgba(0, 0, 0, 0.06);
    }
  }
}
</style>
